<template>
	<view class="item" v-if="!type" @click="toDetail">
		<view class="img-box">
			<image class="img" :src="props.item.img" mode="scaleToFill"></image>
		</view>
		<view class="middle">
			<view class="my-text title">
				<text>{{props.item.nm}}</text>
			</view>
			<view class="rate">
				<view>
					观众评<text>{{props.item.sc}}</text>
				</view>
			</view>
			<view class="my-text star">
				主演:{{props.item.star}}
			</view>
			<view class="info">
				{{props.item.showInfo}}
			</view>
		</view>
		<view class="right" :style="{'backgroundColor':props?.item?.showStateButton?.color||'var(--yellow)'}">
			{{props.item?.showStateButton?.content || '想看'}}
		</view>
	</view>
	<view class="item" v-else-if="type==1" @click="toDetail">
		<view class="img-box">
			<image class="img" :src="props.item.poster" mode="scaleToFill"></image>
		</view>
		<view class="middle">
			<view class="my-text title">
				<text>{{props.item.movieInfo.title}}</text>
			</view>
			<view class="rate">
				<view>
					<text>{{props.item.movieInfo.englishTitle}}</text>
				</view>
			</view>
			<view class="my-text star">
				主演:{{props.item.movieInfo.actors}}
			</view>
			<view class="info">
				{{props.item.showInfo}}
			</view>
		</view>
		<view class="score">
			<text class="score-text">{{props.item?.score || '10'}}</text>评分
		</view>
	</view>
</template>

<script setup>
	const props = defineProps(["item", "type"]);
	const toDetail = () => {
		console.log(props.item);
		uni.navigateTo({
			url: `/pages/movie-detail/movie-detail?movieId=${props.item.movieId||props.item.id}`
		});
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 2rpx solid var(--gray3);

		.img-box {
			width: 150rpx;
			min-width: 150rpx;
			height: 212rpx;

			.img {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.middle {
			flex-grow: 1;
			margin-left: 20rpx;
			color: var(--gray);
			font-size: 28rpx;

			>view {
				margin-top: 10rpx;
			}

			.title {
				font-size: 34rpx;
				color: var(--black);
				font-weight: bold;
			}
		}

		.right {
			min-width: 60rpx;
			height: 40rpx;
			text-align: center;
			padding: 10rpx 30rpx;
			background-color: var(--red);
			border-radius: 30rpx;
			color: var(--white);

		}

		.score {
			min-width: 60rpx;
			height: 40rpx;
			text-align: center;
			padding: 10rpx 30rpx;
			color: var(--gray);
			font-size: 24rpx;

			.score-text {
				color: var(--yellow);
				font-size: 30rpx;
				margin-right: 6rpx;
			}
		}
	}
</style>